<template>
  <div>
    <div id="roseCharts"></div>
  </div>
</template>
 
<script>
import * as echarts from "echarts";
export default {
  // name: 'v-roseCharts',
  data() {
    return {};
  },
  mounted() {
    let roseCharts = echarts.init(document.getElementById("roseCharts"));
    let option = {
      tooltip: {
        trigger: "item",
        formatter: "{a} <br/>{b} : {c} ({d}%)"
      },
      legend: {
        left: "center",
        top: "bottom",
        data: [
          "rose1",
          "rose2",
          "rose3",
          "rose4",
          "rose5",
          "rose6",
          "rose7",
          "rose8"
        ]
      },
      series: [
        {
          name: "面积模式",
          type: "pie",
          radius: [20, 105],
          center: ["50%", "50%"],
          roseType: "area",
          itemStyle: {
            borderRadius: 5
          },
          data: [
            { value: 30, name: "rose 1" },
            { value: 28, name: "rose 2" },
            { value: 26, name: "rose 3" },
            { value: 24, name: "rose 4" },
            { value: 22, name: "rose 5" },
            { value: 20, name: "rose 6" },
            { value: 18, name: "rose 7" },
            { value: 16, name: "rose 8" }
          ]
        }
      ]
    };

    roseCharts.setOption(option);
  },
  methods: {},
  watch: {},
  created() {}
};
</script>

<style scoped>
/* h2{
    text-align: center;
    padding: 10px;
    font-size: 18px;
  } */
#roseCharts {
  width: 100%;
  height: 300px;
  /* border: 1px solid red; */
  margin: 0 auto;
}
</style>
